<!-- 考勤记录-签到签退 -->
<style lang="less">
  .page {
    text-align: right;
    margin-top: 10px
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .search-info-style {
    margin: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .title {
    text-align: center;
    font-size: 1.5rem;
    padding: 20px;
  }
  .notice-name {
    line-height: 2.5;
    margin-top: 6%;
  }
  .notice-context {
    text-indent: 2em;
    line-height: 2.5;
  }
  .notice-content1 {
    padding: 0 4% 0 12%;
    position:relative;
  }
  .notice-address {
    text-align: right;
    margin-top: 10%;
  }
  .notice-address1 {
    text-align: right;
    margin-top: 10px;
  }
  .notice-date {
    text-align: right;
  }
  .text-line {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    text-align: center;
  }
  .text-line-date {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 10%;
    text-align: center;
  }
  .text-line-address {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 15%;
    text-align: center;
  }
  .print-btn {
    padding: 15px;
    float: right;
  }
  .code-img2 {
    height: 120px;
    width: 120px;
    top: 70%;
    left: 4%;
    position: absolute;
  }
  .code-img1 {
    height: 60%;
    width: 90%;
    margin-left: 5%;
  }
  .centerimg {
    text-align: center;
  }
  .pre_img_style {
    height:500px;
    width:auto;
    max-width: 500px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>

<template>
  <div>
    <Card>
      <Row class="search-info-style">
        <Col span="2">
          <Button class="new-btn-sty" type="primary" icon="md-checkmark" @click="signIn()" :disabled="sign_in_disabled">签到</Button>
        </Col>
        <Col span="2">
          <Button class="new-btn-sty" type="primary" icon="md-close"  @click="signOut" :disabled="sign_out_disabled">签退</Button>
        </Col>
      </Row>
    <br />
      <Row>
        <Col span="6">
          签到时间：{{sign_in_time}}
        </Col>
        <Col span="6">
          签退时间：{{sign_out_time}}
        </Col>
      </Row>
    </Card>
    <Card style="margin-top: 2%">
      <div class="table-style">
      <Table stripe :columns="columns" :data="tableData">
      </Table>
      </div>
      <div class="page">
        <Page show-total  show-sizer class="page_style"
              :current="pageObj.pageNo" :page-size="pageObj.pageSize"
              :total="pageObj.totalRecord"
              @on-change="getPageNo"
              @on-page-size-change="pageSizeChange"
        ></Page>
      </div>

    </Card>
  </div>
</template>
<script>
  import axios from '@/libs/api.request'
  export function postAction (url, parameter) {
    return axios.request({
      url: url,
      method: 'post',
      data: parameter
    })
  }
  export default {
    data () {
      return {
        columns: [
          {
            title: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '登录账号',
            key: 'login_name',
            width: 200,
            align: 'center'
          },
          {
            title: '考勤日期',
            key: 'create_time',
            align: 'center',
            render: (h, params) => {
              let value = params.row.create_time
              if (typeof (value) === 'undefined' || value === null || value === '' || value === undefined) {
                value = '--'
              } else {
                value = this.DateFormat(value, 'YYYY-MM-DD')
              }
              return h('span', value + ' ')
            }
          },
          {
            title: '签到时间',
            key: 'sign_in',
            align: 'center',
            render: (h, params) => {
              let value = params.row.sign_in
              if (typeof (value) === 'undefined' || value === null || value === '' || value === undefined) {
                value = '--'
              } else {
                value = this.DateFormat(value, 'HH:mm:ss')
              }
              return h('span', value + ' ')
            }
          },
          {
            title: '签退时间',
            slot: 'sign_out',
            align: 'center',
            render: (h, params) => {
              let value = params.row.sign_out
              if (typeof (value) === 'undefined' || value === null || value === '' || value === undefined) {
                value = '--'
              } else {
                value = this.DateFormat(value, 'HH:mm:ss')
              }
              return h('span', value + ' ')
            }
          }
        ],
        pageObj: {
          pageNo: 1,
          pageSize: 10,
          totalRecord: 0
        },
        tableData: [], // 表格数据
        sign_in_time: '', // 当日签到时间
        sign_out_time: '', // 当日签退时间
        sign_in_disabled: false, // 签到按钮disabled
        sign_out_disabled: true // 签退按钮disabled
      }
    },
    computed: {},
    methods: {
      getPageNo (pageNo) {
        let param = {
          pageNo: pageNo,
          pageSize: this.pageObj.pageSize
        }
        this.initData(param)
      },
      pageSizeChange (pageSize) {
        let param = {
          pageNo: this.pageObj.pageNo,
          pageSize: pageSize
        }
        this.initData(param)
      },
      initData (param) {
        // 查询列表
        let url = '/api/ac/cscforxq/attendanceRecordService/findList'
        postAction(url, param).then((res) => {
          console.log(res.data.data.results)
            if (res.data.errcode === 0) {
              this.tableData = res.data.data.results
              this.pageObj.totalRecord = res.data.data.totalRecord;
            } else {
              this.$Notice.error({
                title: '获取考勤记录失败',
                desc: res.data.errmsg
              })
            }
        })

        // 获取当前用户的签到签退信息
        url = '/api/ac/cscforxq/attendanceRecordService/getAttendanceRecord'
        postAction(url, param).then((res) => {
          // console.log(res.data.data.sign_in)
          // console.log(res.data.data.sign_out)
          if (res.data.data.sign_in != undefined) {
            this.sign_in_disabled = true; // 签到信息不为空，按钮置为不可用
            this.sign_in_time = this.DateFormat(res.data.data.sign_in, 'YYYY-MM-DD HH:mm:ss');
          } else {
            this.sign_in_disabled = false; // 签到信息为空，按钮置为可用
          }
          if (res.data.data.sign_out != undefined) {
            this.sign_out_disabled = true; // 签退信息不为空，按钮置为不可用
            this.sign_out_time = this.DateFormat(res.data.data.sign_out, 'YYYY-MM-DD HH:mm:ss');
          } else {
            if (this.sign_in_disabled == true) {
              // 签到之后才能签退
              this.sign_out_disabled = false;
            }
          }
        })
      },
      signIn () {
        // 签到
        this.sign_in_disabled = true;// 防止重复提交
        var url = '/api/ac/cscforxq/attendanceRecordService/saveAttendanceRecord'
        var param = {
            'signType': 'in'
        }
        postAction(url, param).then((res) => {
          if (res.data.data == '1') {
            this.$Message.success('签到成功')
          } else {
            this.sign_in_disabled = false;// 防止重复提交
            this.$Message.error('签到失败')
          }
        }).finally(() => {
          let param = {
            pageNo: this.pageObj.pageNo,
            pageSize: this.pageObj.pageSize
          }
          this.initData(param);
        })
      },
      signOut () {
        // 签退
        this.$Modal.confirm({
          title: '确定签退吗？',
          onOk: () => {
            var url = '/api/ac/cscforxq/attendanceRecordService/saveAttendanceRecord'
            var param = {
              'signType': 'out'
            }
            postAction(url, param).then((res) => {
              if (res.data.data == '1') {
                this.$Message.success('签退成功')
              } else {
                this.$Message.error('签退失败')
              }
            }).finally(() => {
              let param = {
                pageNo: this.pageObj.pageNo,
                pageSize: this.pageObj.pageSize
              }
              this.initData(param);
            })
          }
        })
      },
      // 日期格式化
      DateFormat (date, format) {
        if (!date) {
          return ''
        }
        let d = new Date(date)
        // 年
        if (/YYYY/.test(format)) {
          format = format.replace(/YYYY/, d.getFullYear())
        }
        // 月份
        let month = d.getMonth() + 1
        if (/MM/.test(format)) {
          let monthStr = month < 10 ? '0' + month : month
          format = format.replace(/MM/, monthStr)
        } else if (/M/.test(format)) {
          format = format.replace(/M/, month)
        }
        // 日期
        let dates = d.getDate()
        if (/DD/.test(format)) {
          let dateStr = dates < 10 ? '0' + dates : dates
          format = format.replace(/DD/, dateStr)
        } else if (/D/.test(format)) {
          format = format.replace(/D/, dates)
        }
        // 小时
        let hours = d.getHours()
        if (/HH/.test(format)) {
          let hoursStr = hours < 10 ? '0' + hours : hours
          format = format.replace(/HH/, hoursStr)
        } else if (/H/.test(format)) {
          format = format.replace(/H/, hours)
        } else if (/hh/.test(format)) {
          let hoursMin = hours > 12 ? hours - 12 : hours
          let hoursStr = hoursMin < 10 ? '0' + hoursMin : hoursMin
          format = format.replace(/hh/, hoursStr)
        } else if (/h/.test(format)) {
          let hoursMin = hours > 12 ? hours - 12 : hours
          format = format.replace(/h/, hoursMin)
        }
        // 分
        let minutes = d.getMinutes()
        if (/mm/.test(format)) {
          let minutesStr = minutes < 10 ? '0' + minutes : minutes
          format = format.replace(/mm/, minutesStr)
        } else if (/m/.test(format)) {
          format = format.replace(/m/, minutes)
        }
        // 秒
        let seconds = d.getSeconds()
        if (/ss/.test(format)) {
          let secondsStr = seconds < 10 ? '0' + seconds : seconds
          format = format.replace(/ss/, secondsStr)
        } else if (/s/.test(format)) {
          format = format.replace(/s/, seconds)
        }
        return format
      }
    },
    mounted () {
      let param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      this.initData(param);
    }
  }
</script>
